<?php $curPage = $this->config->site_url().$this->uri->uri_string(); ?>

<script type="text/javascript">
	var curPage = '<?=$curPage;?>';
	var plasa_id = '<?= $is_super_admin ? 0 : $plasa;?>';
	var csr_id = '0';
	var timeType = 0;
	var month_label = {	
		'01' : 'Januari',
		'02' : 'Februari',
		'03' : 'Maret',
		'04' : 'April',
		'05' : 'Mei',
		'06' : 'Juni',
		'07' : 'Juli',
		'08' : 'Agustus',
		'09' : 'September',
		'10' : 'Oktober',
		'11' : 'November',
		'12' : 'Desember'
	};
	
	var temp_available = {};
	var smile = null; 
	
	$(function(){
		<?php if($is_super_admin){?>initPlasa();<?php } ?>
		initCSR();
		initTickAll();
		initTimePicker();
		$("#generate").click(function(){generate();});
	});
	
	function generate(){
		smile = $("#tabs");
		smile.empty();
		smile.append('<ul></ul>');
		if($("input[name='question_id']:checked").length > 0){
			if(timeType == 0){
				if($("#dateFrom-value").val() != '' && $("#dateTo-value").val() != '' ){				
					$("input[name='question_id']:checked").each(function () {
						var date_from = $("#dateFrom-value").val(),
						date_to = $("#dateTo-value").val();

						var q_id = $(this).val();
						var q_title = $(this).attr('title');

						var param="/"+timeType+"/"+date_from+"/"+date_to+"/"+q_id;
						fillTable(q_id, q_title, param, date_from, date_to, q_id);

						param="%2F"+date_from+"%2F"+date_to+"%2F"+q_id;
						createSWF(param, q_id);
					});
				}else{
					alert ("Harap mengisi rentang waktu yang ingin dipantau.");
				}
			}else if(timeType == 1){
				if($('#tr-1 .select-year') != '' ){
					var selected_year = $('#tr-1 .select-year').val();
					var selected_month = $('#tr-1 .select-month').val();

					$("input[name='question_id']:checked").each(function () {
						var q_id = $(this).val();
						var q_title = $(this).attr('title');

						var param="/"+timeType+"/"+selected_month+"/"+selected_year+"/"+q_id;
						fillTable(q_id, q_title, param, selected_month, selected_year, q_id);

						var param="%2F"+selected_month+"%2F"+selected_year+"%2F"+q_id;
						createSWF(param, q_id);
					});
				}else{
					alert ("Tidak ada data.");
				}
			}else if(timeType == 2){
				if($('#tr-2 .select-year') != '' ){
					var selected_year = $('#tr-2 .select-year').val();

					$("input[name='question_id']:checked").each(function () {
						var q_id = $(this).val();
						var q_title = $(this).attr('title');

						var param="/"+timeType+"/"+selected_year+"/"+q_id+"/null";
						fillTable(q_id, q_title, param, selected_year, q_id, false);

						param="%2F"+selected_year+"%2F"+q_id+"%2Fnull";
						createSWF(param, q_id);
					});
				}else{
					alert ("Tidak ada data.");
				}
			}
			refreshTab();
		}else{
			alert ("Harap mengisi salah satu kriteria pertanyaan.");
		}
	}
	
	function getTableContainer( param1, param2, param3){
		var table = '';
		table += '<div class="side-table table-left">' +
					'<table class="center">' +
						'<tr class="hHeader"><td>Tingkat Kepuasan<td></tr>' +
						'<tr class="hYes"><td>Ya<td></tr>' +
						'<tr class="hNo"><td>Tidak<td></tr>' +
						'<tr class="hPercent"><td>%<td></tr>' +
					'</table>'+
				 '</div>'+
				 '<div class="table-right">'+
					'<table>' +
						'<tr class="tHeader"><tr>' +
						'<tr class="tYes"></tr>'+
						'<tr class="tNo"></tr>'+
						'<tr class="tPercent"></tr>'+
					'</table>'+
				  '</div>'+
				  '<div class="clearboth"></div>'+
					'<div class="center mt-10">' +
						'<input class="button" type="button" onclick="ExportMyChart(\''+param1+'\', \''+param2+'\', \''+param3+'\', false);" value="Buat Excel"/>' +
						'<input class="button" type="button" onclick="ExportMyChart(\''+param1+'\', \''+param2+'\', \''+param3+'\', true);" value="Print Laporan"/>' +
					'</div>';
		return table;
	}
	
	//for timetype 0 : param 1 is first date, param 2 is end date, and param 3 is question_id
	//for timetype 1 : param 1 is month, param 2 is year, and param 3 is question_id
	//for timetype 2 : param 1 is year, param 2 is question_id, and param 3 is null/false
	
	function fillTable(q_id, q_title, url_param, param1, param2, param3){
		
		smile.find('ul').append('<li><a href="'+curPage+'#tabs-'+q_id+'" title="'+q_title+'">Q'+q_id+'</a></li>');
		smile.append('<div class="q-tab" id="tabs-'+q_id+'">'+
			'<div id="chart-pie-'+q_id+'"></div>'+
			'<div id="chart-'+q_id+'"></div>'+
			'<div class="table-stat" id="table-'+q_id+'">'+getTableContainer(param1, param2, param3)+'</div>'+
			'</div>');
		
		$.get(base_url + 'admin/statistic/get_data_table' + url_param + '/' + plasa_id + '/' + csr_id,
			   function(data) {
				   var header = data.tHeader;
				   for (n in header){
						$('#table-'+q_id).find('.tHeader').append('<td>'+header[n]+'</td>');
				   }
				   var tYes = data.tYes;
				   for (n in header){
						$('#table-'+q_id).find('.tYes').append('<td>'+tYes[n]+'</td>');
				   }
				   var tNo = data.tNo;
				   for (n in header){
						$('#table-'+q_id).find('.tNo').append('<td>'+tNo[n]+'</td>');
				   }
				   var tPercent = data.tPercent;
				   for (n in header){
						$('#table-'+q_id).find('.tPercent').append('<td>'+tPercent[n]+'%</td>');
				   }
			   }, "json");
	}
	
	function initTimePicker(){
		$('.time_type, input[name="question_id"], #csr_selector, #plasa_selector').change(function(){
			timeType = $('input[name="time_type"]:checked').val();
			$(".time-response").hide();
			if(timeType > 0){
				var fields = $('input[name="question_id"]:checked').serializeArray();
				var values = [];
				for (n in fields){
					values.push(fields[n]['value']);
				}
				if(values.length > 0){
					var stringvalues = JSON.stringify(values);
					
					var data= {	q_id : stringvalues, plasa_id : plasa_id, csr_id : csr_id};
					$.post(base_url + 'admin/statistic/get_available_time', data, function(data) {
						var result = $.parseJSON(data);
						
						var yearselect = $('#tr-'+timeType+' .select-year');
						yearselect.empty();
						
						var first = true;
						for(n in result){
							yearselect.append('<option value="'+n+'">'+n+'</option>');
							
							if(timeType == 1 && first){
								var monthselect	= $('#tr-1 .select-month'),
								arrayMonth = result[n];
								
								monthselect.empty();
								for(n in arrayMonth){
									monthselect.append('<option value="'+arrayMonth[n]+'">'+month_label[arrayMonth[n]]+'</option>');	
								}
								first = false;
							}
						}
						temp_available.length = 0;
						temp_available = result;
					});
				}
			}	
			$("#tr-" + timeType).show();
		});
		$('#tr-1 .select-year').change(function(){
			var selected_year = $(this).val(),
			arrayMonth = temp_available[selected_year],
			monthselect	= $('#tr-1 .select-month');
			
			monthselect.empty();
			for(n in arrayMonth){
				monthselect.append('<option value="'+arrayMonth[n]+'">'+month_label[arrayMonth[n]]+'</option>');	
			}
		});
	}
	
	function initTickAll(){
		$('#tick-all').change(function(){
			if($('#tick-all').is(':checked')){
				$('.question_item').prop('checked', true);
			}else{
				$('.question_item').prop('checked',false);
			}
		});
	}
	
	<?php 
		if($is_super_admin){
	?>
			function initPlasa(){
				$('#plasa_selector').change(function(){
					plasa_id = $(this).val();
					if(plasa_id > 0){
						$('#plasa_name').text($('#plasa_selector option:selected').text());
					}else{
						$('#plasa_name').text('');
					}
					
					var csr_selector = $('#csr_selector');
					$('#csr_name').text('');
					
					if(plasa_id > 0 ){
						$.get(base_url + 'admin/statistic/get_csr/' + plasa_id,
						   function(data) {
							   csr_selector.empty();
							   csr_selector.append('<option class="csr_option" id="csr-0" value="0">Semua CSR</option>');
							   
							   for (n in data){
									csr_selector.append('<option class="csr_option" id="csr-'+data[n]['csr_id']+'" value="'+data[n]['csr_id']+'">'+data[n]['csr_name']+'</option>');
							   }
							   
							   csr_selector.parent().show();
						   }, "json");
					}else{
						csr_selector.parent().hide();
					}
				});
			}
	
	<?php 
		}
	?>
	
	function initCSR(){
		if(plasa_id > 0 ) $('#csr_selector').parent().show();
		else $('#csr_selector').parent().hide();
		
		$('#csr_selector').change(function(){
			csr_id = $(this).val();
			
			if(csr_id > 0){
				$('#csr_name').text($('#csr_selector option:selected').text());
			}else{
				$('#csr_name').text('');
			}
		});
	}
		
	function refreshTab(){
		$( "#tabs" ).tabs().tabs( "refresh" );
	}
		
	function createSWF(param, q_id){
		
		var url= "", url_pie = "";
		
		if(timeType == 0) url_pie = "<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_data_pie%2F" + timeType;
		else if(timeType == 1) url_pie = "<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_data_pie%2F" + timeType;
		else if(timeType == 2) url_pie = "<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_data_pie%2F" + timeType;
			
		swfobject.embedSWF(
		  "<?= base_url();?>assets/swf/open-flash-chart.swf", "chart-pie-"+q_id,
		  "900", "300",
		  "9.0.0", "expressInstall.swf",
		  {"data-file":url_pie + param + "%2F" + plasa_id + "%2F" + csr_id }
		);
			
		if(timeType == 0) url = "<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_daily_data";
		else if(timeType == 1) url = "<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_weekly_data";
		else if(timeType == 2) url = "<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_monthly_data";
		swfobject.embedSWF(
		  "<?= base_url();?>assets/swf/open-flash-chart.swf", "chart-"+q_id,
		  "900", "300",
		  "9.0.0", "expressInstall.swf",
		  {"data-file":url + param + "%2F" + plasa_id + "%2F" + csr_id}
		);
	}
	
	
	//for timetype 0 : param 1 is first date, param 2 is end date, and param 3 is question_id
	//for timetype 1 : param 1 is month, param 2 is year, and param 3 is question_id
	//for timetype 2 : param 1 is year, param 2 is question_id, and param 3 is null/false
	function ExportMyChart(param1, param2, param3, excel) {
		var question_id = (timeType == 2 ? param2 : param3);
		var urlPie = "<?= base_url();?>admin/statistic/ofc_upload_image/"+timeType+"/"+param1+"/"+param2+"/"+param3+"/"+plasa_id+"/"+csr_id+"/filePie.png";
		var url = "<?= base_url();?>admin/statistic/ofc_upload_image/"+timeType+"/"+param1+"/"+param2+"/"+param3+"/"+plasa_id+"/"+csr_id+"/fileBar.png"+"/true"+"/"+excel;
		
		var ofcPie = findSWF("chart-pie-" + question_id);
		var ofc = findSWF("chart-" + question_id);
		ofcPie.post_image( urlPie, '', false );
		ofc.post_image( url, '', true );
	}
	
	function findSWF(movieName) {
		if (navigator.appName.indexOf("Microsoft")!= -1) {
			return window[movieName];
		} else {
			return document[movieName];
		}
	}
		
	function createSWF2(param,q_id){
		swfobject.embedSWF(
		  "<?= base_url();?>assets/swf/open-flash-chart.swf", "chart-"+q_id,
		  "900", "300",
		  "9.0.0", "expressInstall.swf",
		  {"data-file":"<?= urlencode(base_url());?>admin%2Fstatistic%2Fget_data_pie"+param}
		);
	}
	
	function generate2(){
		if($("#dateFrom-value").val() != '' && $("#dateTo-value").val() != '' ){
			q_id = $(".question_option:selected").val(),
			date_from = $("#dateFrom-value").val(),
			date_to = $("#dateTo-value").val();
			
			var smile = $("#smile_chart");
			//smile.empty();
			
			$("input[name='question_id']:checked").each(function () {
				q_id = $(this).val();
				smile.append('<div id="chart-'+q_id+'"></div>');
				
				var param="%2F"+date_from+"%2F"+date_to+"%2F"+q_id;
				createSWF(param,q_id);
			});
		}else{
			alert ("Harap mengisi rentang waktu yang ingin dipantau.");
		}
	}
</script>

<div class="chart-content">
    <div class="post">
        <h2 class="title">Monitoring Indeks Pelayanan Plasa <span id="plasa_name"><?=$plasa_name;?></span></h2>
        <h3><span id="csr_name"></span></h3>
        <div style="clear: both;">&nbsp;</div>
		<?php 
			if($is_super_admin){
		?>
		<div class="center">
		Pilih berdasarkan plasa :&nbsp;
		<select id="plasa_selector">
			<?php
					echo '<option class="plasa_option" id="plasa-0" value="0">Semua Plasa</option>';
					foreach($plasa as $key => $val){
							echo '<option class="plasa_option" id="plasa-'.$val['plasa_id'].'" value="'.$val['plasa_id'].'">'.$val['name'].'</option>';
					}
			?>
		</select>
		</div>
		<?php } 
		
		//print_r($csr);
		?>
		<div class="center">
		Pilih berdasarkan CSR :&nbsp;
		<select id="csr_selector">
			<?php
					echo '<option class="csr_option" id="csr-0" value="0">Semua CSR</option>';
					foreach($csr as $key => $val){
							echo '<option class="csr_option" id="csr-'.$val['csr_id'].'" value="'.$val['csr_id'].'">'.$val['csr_name'].'</option>';
					}
			?>
		</select>
		</div>
        <div class="entry mt-30">
            <form>
                &nbsp;
				<div class="fieldset-question">
				<fieldset>
					<legend>Kriteria : (<input type="checkbox" value="0" id="tick-all" name="tick-all" title="tandai semua"/><label for="tick-all">Tandai semua</label>&nbsp;)&nbsp; </legend>
					<div class="question-box">
						<ul>
						<?php
							foreach($questions as $key => $val){
								echo '<li><input type="checkbox" value="'.$val['question_id'].'" id="question-'.$val['question_id'].'" name="question_id" class="question_item" title="'.$val['content'].'"/><label for="question-'.$val['question_id'].'">'.$val['content'].'</label></li>';
							}
						?>
						</ul>
					</div>
				</fieldset>
				</div>
				<div class="fieldset-question duration-picker">
					
				<fieldset>	
					<legend>Rentang waktu :</legend>
					<div class="question-box">
						&nbsp;Lihat :&nbsp;
						<input type="radio" value="0" id="tt-0" class="time_type" name="time_type" checked="checked"/><label for="tt-0">Harian</label>
						<input type="radio" value="1" id="tt-1" class="time_type" name="time_type"/><label for="tt-1">Bulanan</label>
						<input type="radio" value="2" id="tt-2" class="time_type" name="time_type"/><label for="tt-2">Tahunan</label>
						<hr>
						<div class="clearboth"></div>
						<div class="time-response" id="tr-0">
							<div class="input-block"><label>Mulai</label><span class="input-right"><input class='monthpicker' id='dateFrom' readonly="readonly"/><input type="hidden" id="dateFrom-value"/></span></div>
							<div class="input-block"><label>Selesai</label><span class="input-right"><input class='monthpicker' id='dateTo' readonly="readonly"/><input type="hidden" id="dateTo-value"/></span></div>	
						</div>
						<div class="time-response hide" id="tr-1">
							<select class="select-year">
							</select>
							<select class="select-month">
							</select>
						</div>
						<div class="time-response hide" id="tr-2">
							<select class="select-year">
							</select>	
						</div>
					</div>
				</fieldset>
				</div>
				<div class="clearboth"></div>
                <div class="center"><input class="mt-30 button" type="button" id="generate" value="Buat Statistik"/></div>
            </form>
        </div>
    </div>
</div>
<div id="tabs"></div>
